<template>
  <div>
    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />
    <el-table :data="choiceList">
      <el-table-column label="试题编号"
                       width="150px"
                       prop="number" />
      <el-table-column label="学科"
                       width="150px"
                       prop="subject" />
      <el-table-column label="目录"
                       width="150px"
                       prop="catalogID" />
      <el-table-column label="题型"
                       width="150px">
        <template #default="{row}">
          <span v-if="row.questionType === '1'">单选</span>
          <span v-else-if="row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column label="题干"
                       width="150px">
        <template #default="{row}">
          <span v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column label="录入时间"
                       width="150px"
                       prop="addDate" />
      <el-table-column label="难度"
                       width="150px">
        <template #default="{row}">
          <span v-if="row.difficulty === '1'">简单</span>
          <span v-else-if="row.questionType === '2'">一般</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>
      <el-table-column label="录入人"
                       width="150px"
                       prop="creator" />
      <el-table-column label="审核状态"
                       width="150px">
        <template #default="{row}">
          <span v-if="row.chkState === 0">待审核</span>
          <span v-else-if="row.chkState === 1">已审核</span>
          <span v-else>已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column label="审核意见"
                       width="150px"
                       prop="chkRemarks" />
      <el-table-column label="审核人"
                       width="150px"
                       prop="chkUser" />
      <el-table-column label="发布状态"
                       width="150px">
        <template #default="{row}">
          <span v-if="row.publishState === 0">已下架</span>
          <span v-else>已上架</span>

        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="250px"
                       fixed="right">
        <template #default="{row}">
          <el-button type="text"
                     @click="handleView(row)">预览</el-button>
          <el-button type="text"
                     :disabled="row.chkState===1"
                     @click="handleChkState(row)">审核</el-button>
          <el-button type="text"
                     :disabled="row.publishState===1"
                     @click="$router.push(`/questions/new?id=${row.id}`)">修改</el-button>
          <el-button type="text"
                     @click="handleAbove(row)">{{ row.publishState===0 ? '上架' : '下架' }}</el-button>
          <el-button type="text"
                     :disabled="row.publishState===1"
                     @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination :current-page="query.page"
                     :page-sizes="[2, 3, 8, 10]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>

    <el-dialog title="审核"
               :visible="showChk"
               width="30%"
               @close="handleClose">
      <el-form label-width="80px">
        <el-form-item label="是否通过">
          <el-radio-group v-model="formData.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核原因">
          <el-input v-model="formData.chkRemarks" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type=""
                   size="small"
                   @click="handleClose">取消</el-button>
        <el-button type="primary"
                   size="small"
                   @click="handleCheck">确定</el-button>
      </template>
    </el-dialog>

    <question-view :show-view.sync="showView"
                   :show-view-obj="showViewObj" />
  </div>
</template>

<script>
import { addOrRemoveChoiceAPI } from '@/api/questions-list'
import { updateQuesStateAPI, aboveQuestionAPI } from '@/api/choice.js'
import QuestionView from '../../list/components/questionView.vue'
export default {
  name: 'ChoicesView',
  components: {
    QuestionView
  },
  props: {
    choiceList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    query: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pagesize: 10
        }
      }
    }
  },
  data () {
    return {
      showChk: false,
      formData: {

      },
      // 控制预览弹窗
      showView: false,
      showViewObj: {}

    }
  },
  created () {

  },
  methods: {
    // 删除
    async handleDel (row) {
      try {
        await this.$confirm('确定删除嘛', '提示', {
          type: 'warning'
        })
        await addOrRemoveChoiceAPI(row.id, 0)
        this.$message.success('删除成功')
        this.$emit('handleUpdate')
      } catch (e) {
        this.$message.error('已取消')
      }
    },
    // 打开审核状态
    async handleChkState (row) {
      this.showChk = true
      this.id = row.id
    },
    // 关闭弹窗
    handleClose () {
      this.showChk = false
    },
    // 试题审核
    async handleCheck () {
      await updateQuesStateAPI({ id: this.id, ...this.formData })
      this.$message.success('审核成功')
      this.handleClose()
      this.$emit('handleUpdate')
    },
    // 上架下架
    async handleAbove (row) {
      try {
        if (row.publishState === 0) {
          await this.$confirm('确定上架嘛', '提示', {
            type: 'warning'
          })
          await aboveQuestionAPI(row.id, 1)
          this.$message.success('上架成功')
          this.$emit('handleUpdate')
        } else {
          await this.$confirm('确定下架嘛', '提示', {
            type: 'warning'
          })
          await aboveQuestionAPI(row.id, 0)
          this.$message.success('下架成功')
          this.$emit('handleUpdate')
        }
      } catch (e) {
        this.$message.error('已取消')
      }
    },
    // 打开预览
    handleView (row) {
      this.showView = true
      this.showViewObj = row
    },
    // 页面条数发生变化时
    handleSizeChange (val) {
      this.$emit('handleSize', val)
      this.$emit('handleUpdate')
    },
    // 页码发生变化时
    handleCurrentChange (val) {
      this.$emit('handlePage', val)
      this.$emit('handleUpdate')
    }
  }
}
</script>

<style scoped lang="scss">
.el-alert {
  margin-top: 5px;
}
.pagination {
  display: flex;
  justify-content: right;
}
</style>

